<template>
  <div class="login-container">
    <div class="header">
      <van-icon name="arrow-left" color="#1989fa" />

      <div>登录</div>

      <el-button type="text">首页</el-button>
    </div>

    <div class="user-info">
      <img style="width: 60px; height: 60px" :src="userImg" alt="" />
      <span>shopping-vue</span>
    </div>

    <div class="login-form">
      <van-form>
        <van-field
          v-model="username"
          name="用户名"
          placeholder="用户名"
		  left-icon="manager-o"
		  clearable
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
		  left-icon="shield-o"
          placeholder="密码"
        />
		<div class="register-password">
			<span>免费注册</span>
			<span>忘记密码</span>
		</div>
        <div>
          <van-button
            block type="danger"
            native-type="submit"
            @click="login"
            >登录</van-button
          >
        </div>
      </van-form>

    </div>
  </div>
</template>

<script>
import request from '../fetch/index.js'
import axios from 'axios'

export default {
  name: "login",
  data() {
    return {
      userImg: require("../assets/images/User.png"),
	  username: '',
	  password: ''
      // userImg: require('../assets/images/apple-3.jpg')
    };
  },
  methods: {
    login () {
      axios({
        url: 'http://192.168.200.251:8888/wx/auth/login',
        method: 'post',
        data: {
          password: this.password,
          username: this.username
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.$toast.success('登陆成功')
          console.log(res.data.data.token)
          console.log(res.data.data.userInfo)
          // Shopping-Token
          // 将token存到session中
          sessionStorage.setItem('Shopping-Token', res.data.data.token)
          // 将用户信息存到session中
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
          // 跳到首页----home
          this.$router.push({
            path: '/home'
          })
        } else {
          this.$toast.fail('登陆失败')
        }
      })
    }
  }
};
</script>

<style scope lang="scss">
.login-container {
  .header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  .van-form {
	  padding: 0 15px;

	  .van-cell {
		  border: 1px solid #ddd;
		  border-radius: 5px;
		  margin-bottom: 15px;
	  }
  }

  .register-password {
	  display: flex;
	  line-height: 30px;
	  justify-content: space-between;
	  padding: 0 20px;
	  box-sizing: border-box;
	  font-size: 14px;
  }
}
</style>
